<template>
    <div>
        <!-- 视图 -->
        <div class="container">
            <router-view />
        </div>
        <!-- 导航 -->
        <div class="tab">
            <!-- 使用tabList组件 -->
            <tab-list :index="index" @change="tab_chang"></tab-list>
        </div>
    </div>
</template>


<script>
    // 引入vue组件
    import tabList from '@/components/tab-list'
    // 实例数据
    export default {
        // 引入组件
        components: {
            tabList
        },
        data(){
            return {
                // 当前tab的 下标
                index: 0
            }
        },
        // $route  当前路由的信息
        watch: {
            /* 
                因为watch 监听在vue实例创建完成之前
                默认不会进行数据监听
                需要一个参数告诉她，vue创建的时候立刻监听变化
            */
            "$route.path":{
                handler(nVal){
                    // console.log(nVal);
                    switch(nVal){
                        case '/':
                            this.index = 0;
                            break;
                        case '/community':
                            this.index = 1;
                            break;
                        case '/cart':
                            this.index = 2;
                            break;
                        default:
                            this.index = 3;
                            break;
                    }
                },
                // 立即执行监听 true 默认为false
                immediate: true
            }
        },
        methods:{
            tab_chang(e){
                // console.log(e);
                if(this.index == e){
                    return
                }
                // 判断要跳转的路由
                let path = '/';
                if(e == 0){
                    path = '/'
                }else if(e == 1){
                    path = '/community'
                }else if(e == 2){
                    path = '/cart'
                }else {
                    path= '/myself'
                }
                // 跳转路由
                this.$router.push({
                    path
                    // path: path
                })
                this.index = e;
            }
        }
    }
</script>

<style lang="scss" scoped>
.container{
    height:calc(100vh - 50px);
}
    .tab{
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #999;
    }
</style>